import { Router, Route, Switch, Redirect } from 'react-router-dom'
import { customHistory } from './utils/history'

import Layout from '@/pages/Layout'
import Login from '@/pages/Login'
import ProfileEdt from '@/pages/Profile/Edit'
import Article from './pages/Article'
import Search from './pages/Search'
import SearchResult from './pages/Search/Result'
import Chat from './pages/Profile/Chat'
import { AuthRoute } from './components/AuthRoute'
import { KeepAlive } from './components/KeepAlive'

// 为了让我们自己的样式能够覆盖 antd-mobile 组件库的样式
// 需要将 App.scss 的引入，放在导入组件后
import './App.scss'

const App = () => {
  return (
    <Router history={customHistory}>
      <div className="app">
        {/* 注意：此处，需要将 KeepAlive 路由组件，放在 Switch 外部！ 因此该组件需要一直被渲染、展示 */}
        <KeepAlive path="/home">
          <Layout />
        </KeepAlive>

        {/* Switch 中的路由规则，只有第一个匹配的才会展示 */}
        <Switch>
          <Route path="/" exact render={() => <Redirect to="/home" />} />
          {/* <Route path="/home" component={Layout} /> */}
          <Route path="/login" component={Login} />
          <Route path="/articles/:id" component={Article} />
          <Route exact path="/search" component={Search} />
          <Route path="/search/result" component={SearchResult} />
          {/* <Route path="/profile/edit" component={ProfileEdt} /> */}
          <AuthRoute path="/profile/edit">
            <ProfileEdt />
          </AuthRoute>
          <AuthRoute path="/chat">
            <Chat />
          </AuthRoute>
        </Switch>
      </div>
    </Router>
  )
}

export default App
